<template>
  <nav class="navbar navbar-dark bg-primary">
    <div class="navbar-brand">
      <p class="navbar-item">
        <img src="https://vue3js.cn/docs/logo.png" @click="goWeb" alt="VUE3+TYPESCRIPT 组件开发" />
        <span @click="goHome">VUE3+TYPESCRIPT <br />组件开发</span>
      </p>
    </div>
    <div class="navbar-item" v-if="!userProps.isLogin">
      <button type="button" class="btn btn-light me-2" @click.prevent="loginMethod">
        <span class="icon"> <i class="bi bi-emoji-smile"></i> </span>
        <span> 登 录 </span>
      </button>
      <button type="button" class="btn btn-warning me-2" @click.prevent="signupMethod">
        <span class="icon"> <i class="bi bi-pencil-square"></i> </span>
        <span> 注 册 </span>
      </button>
    </div>
    <div class="navbar-item" v-else>
      <button type="button" class="btn btn-warning" @click="goHome">
        <span class="icon"> <i class="bi bi-emoji-smile"></i> </span>
        <span> 欢迎，{{ userProps.nickName }}</span>
      </button>
      <Dropdown>
        <DropdownItem><router-link :to="{ name: 'create' }"> 写文章 </router-link></DropdownItem>
        <DropdownItem><router-link :to="{ name: 'articlelist' }"> 我的文章 </router-link></DropdownItem>
        <DropdownItem><a @click.prevent="logout"> 退出登录 </a></DropdownItem>
        <DropdownItem><hr class="dropdown-divider" /> </DropdownItem>
        <DropdownItem><router-link :to="{ name: 'login' }"> 更多 </router-link></DropdownItem>
      </Dropdown>
    </div>
  </nav>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import Dropdown from './Dropdown/Dropdown.vue';
import DropdownItem from './Dropdown/DropdownItem.vue';
import { UserProps } from '@/store/types';
import { useRouter } from 'vue-router';
export interface IUserProps {
  id?: string;
  username?: string;
  state: boolean;
}
export default defineComponent({
  name: 'navheader',
  components: { Dropdown, DropdownItem },
  props: {
    userProps: {
      type: Object as PropType<UserProps>,
      required: true
    }
  },
  setup() {
    const router = useRouter();
    const loginMethod = () => {
      router.push({ name: 'login' });
    };
    const goHome = () => {
      router.push({ name: 'home' });
    };
    const goWeb = () => {
      window.open('https://v3.cn.vuejs.org/guide/introduction.html');
    };
    // 注册页面
    const signupMethod = () => {
      router.push({ name: 'signup' });
    };
    // 退出
    const logout = () => {
      localStorage.removeItem('access_token');
      window.open('/login', '_self');
    };
    return { loginMethod, goHome, goWeb, signupMethod, logout };
  }
});
</script>

<style lang="less" scoped>
.navbar {
  .navbar-brand {
    .navbar-item {
      display: flex;
      flex-direction: row;
      padding: 0 10px;
      margin: 0;
      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      span {
        font-size: 16px;
        font-weight: bold;
        color: #eaeaea;
      }
    }
  }
}
</style>
